<template>
	<view class="container">
		<view class="">
			<view class="flexBox">
				<view :class="status == item.value?'statusItem active':'statusItem'" v-for="item in statusList"
					:key="item.title" @click="tabbarChange(item.value, item.title)">
					{{item.title}}
				</view>
			</view>
			<uni-search-bar style="background-color: #fff;" @confirm="search" v-model="keyword" @cancel="cancel"
				placeholder="请输入店铺名称" @clear="getDataList"></uni-search-bar>
		</view>
		<view class="" style="background-color: #fff;padding-bottom: 20rpx;padding-top: 20rpx;">
			<view class="customer" style="margin: 0 20rpx;display: flex;align-items: center;">
				<uni-datetime-picker @change="changeDate" :clear-icon="false" v-model="range" type="daterange" />
				<view v-if="range.length!==0" @click="timeDeletChange" class=""
					style="background-color: #fff;border-radius: 50%;padding: 5rpx 13rpx;margin-left: 20rpx;">
					<uni-icons type="closeempty" size="15"></uni-icons>
				</view>
			</view>
			<view class=""
				style="color: #0482D4;font-weight: bold;text-align: right;padding-top:20rpx;padding-right:30rpx">
				{{tabType}}赊账总计: ￥{{ toThousands(CreditAmount)  || 0}}
			</view>
		</view>
		<view class="content">
			<scroll-view class="scroll" style="width: 100%;" scroll-y="true" :show-scrollbar="false"
				@scrolltolower="lower">
				<view class="merchant" v-for="item,index in data" :key="index" @click="toInfoPage(item)">
					<view>
						<!-- <text class="textOverflow textWidth"> <text>卖家:</text> {{(item.CompanyName)||''}}</text> -->
						<image v-if="item.IsConfirm == 1" class="floatRight" src="/static/stateIcon/yiqueren.png"
							mode=""></image>
						<image v-else-if="item.IsConfirm == 2" class="floatRight" src="/static/stateIcon/yidahui.png"
							mode=""></image>
						<image v-else class="floatRight" src="/static/stateIcon/daiqueren.png" mode=""></image>
					</view>
					<view>
						<text class="textOverflow textWidth"> <text>买家:</text> {{(item.BuyerStoreName)||''}}</text>
					</view>
					<view >
						单号：{{getReplaceId("B"+item.Id) || ""}}
					</view>
					<view class="" v-if="item.AccountingStartTime">
						账期：{{item.Period+ ' 天 '+formatDate(item.AccountingStartTime)+' ~ '+formatDate(item.AccountingEndTime)+')'}}
					</view>
					<view class="" v-else>
						账期：{{item.Period+ ' 天 '}}
					</view>
					<view class="flexBox">
						<view class="">
							日期：{{item.CreateTime?item.CreateTime.substring(0,10):''}}
						</view> 
						<view class="">
							金额：￥<b style="font-size: 40rpx;">{{toThousands(item.CreditAmount) || 0 }}</b>
							
						</view>
					</view>
					<view v-if="!item.IsClick" class="redDot"> </view>
				</view>
				<!-- 上拉显示更多 -->
				<view class="" style="padding-bottom: 100rpx;">
					<uniLoadMore :status="Status" :contentText="contentText" :rows="data"></uniLoadMore>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	// 引入金额格式化
	import {
		toThousands
	} from '../../util/util.js'
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				// 顶部切换
				tabType:"全部",
				// 金额格式化
				toThousands,
				range: [],
				// 加载状态
				Status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				status: "",
				keyword: '',
				statusList: [{
						value: '',
						title: '全部'
					}, {
						value: '0',
						title: '待确认'
					},
					{
						value: '1',
						title: '已确认'
					},
					{
						value: '2',
						title: '已打回'
					}
				],
				pagination: {
					PageIndex: 1,
					PageRows: 10,
				},
				Total: 0,
				data: [],
				userInfo: {},
				CompanyInfo: {},
				StartDate: "",
				EndDate: "",
				// 赊账总计
				CreditAmount: 0
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.CompanyInfo = uni.getStorageSync('CompanyInfo')

		},
		onShow() {
			//清楚查询页面条件缓存
			uni.removeStorageSync('CollectMoneySearch')
			uni.removeStorageSync('indexSearchQueryValue')
			this.status = ""
			this.Status = "loading"
			this.data=[]
			this.pagination.PageIndex = 1
			// this.GetCount(
			this.getCompanyInfo()
			this.getDataList()
		},
		// 跳转
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/user/user'
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 重置相关参数
			// 加载
			this.Status = "loading"
			this.data = []
			this.pagination.PageIndex = 1
			// 重新获取查询数据
			this.getDataList()
			uni.stopPullDownRefresh(); //停止刷新
		},
		methods: {
			// 格式化日期
			formatDate(dt){
				let arr=dt.split(' ')
				if(arr.length>1){
					return arr[0].replace(/-/g,'/')
				}else{
					return ''
				}
			},
			// 字符串空格处理
			getReplaceId(data){
				if(data){
					return data.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
				}
			},
			// 触底
			lower(e) {
				console.log('触底了')
				if (this.data.length >= this.Total) {
					this.Status = "noMore"
					return
				}
				this.getDataList()
			},
			// 搜索
			search() {
				this.pagination.PageIndex = 1
				this.data = []
				this.getDataList()
			},
			// 搜索清空
			cancel() {
				this.keyword = ""
				this.pagination.PageIndex = 1
				this.data = []
				this.getDataList()
			},
			// 时间选择
			changeDate(e) {
				console.log('时间选择', e)

				this.StartDate = e[0]
				this.EndDate = e[1]
				this.pagination.PageIndex = 1
				this.data = []
				this.keyword = ""
				this.getDataList()
			},
			// 时间清空
			timeDeletChange() {
				this.range = []
				this.keyword = ""
				this.StartDate = ""
				this.EndDate = ""
				this.pagination.PageIndex = 1
				this.data = []
				this.getDataList()
			},
			// 顶部tabbar切换
			tabbarChange(e, type) {
				this.status = e
				this.tabType=type
				this.data = []
				this.pagination.PageIndex = 1
				console.log('导航栏切换', this.status)
				this.getDataList()
			},
			// 获取公司信息
			getCompanyInfo() {
				this.$http("post", "/Base_Manage/Base_Company/GetDataCompanyData", {
						Search: {
							condition: "CreatorId",
							keyword: this.userInfo.Id,
						},
					})
					.then((res) => {
						console.log(res);
						if (res.Success && res.Data.length > 0) {
							this.CompanyInfo = res.Data[0];
							uni.setStorageSync('CompanyInfo', this.CompanyInfo)
						}
					});
			},
			// // 获取底部menu右上角小红点列表数量
			GetCount() {
				this.$http('post', '/BO/ApplicationForm/ShopMessage?CompanyId=' + this.CompanyInfo.Id).then(res => {
					if (res.Success) {
						// 如果数量为0  说明没有订单  不需要显示有角标
						if (res.Data == 0) {
							// 移除底部menu小红点
							uni.removeTabBarBadge({
								index: 1
							});
						} else {
							uni.setTabBarBadge({
								index: 1,
								text: res.Data
							})
						}
						// this.setTabBarBadge(res.Data)

					}
				})
			},
			toInfoPage(item) {
				console.log(item);
				this.$http('post', '/BO/ApplicationForm/ShopClick?id=' + item.Id + '&CompanyId=' + item.CompanyId).then(
					res => {
						if (res.Success) {
							if (item.IsClick == false) {
								this.GetCount()
							}

						}
					})
				uni.navigateTo({
					url: '/pages/Approve/ApproveDetail?Id=' + item.Id
				})
			},

			getDataList(e) {
				console.log('点击', e);
				// if (typeof e == 'number' || typeof e == 'string') this.status = e
				this.Status = "loading"
				this.$http('post', '/BO/ApplicationForm/GetSellerOrderList', {
					...this.pagination,
					"SortField": "CreateTime",
					"SortType": "desc",
					"Search": {
						"keywords": this.keyword,
						"StartDate": this.StartDate,
						"EndDate": this.EndDate,
						"CompanyId": this.CompanyInfo.Id,
						"IsConfirm": this.status
					}
				}).then(res => {
					if (res.Success) {
						if (res.Success) {
							// 赋值总条数
							this.Total = res.Total
							this.CreditAmount = res.MoneyTotal
							if (res.Data.length == 0) {
								this.Status = "noMore"
								return
							}
							if (this.pagination.PageIndex == 1) {
								this.data = res.Data
								this.pagination.PageIndex += 1
							} else {
								this.data = this.data.concat(res.Data)
								this.pagination.PageIndex += 1

							}
							uni.stopPullDownRefresh(); //停止刷新
							if (this.pagination.PageRows * this.pagination.PageIndex >= this.Total) {
								// 暂停加载  没有更多了
								this.Status = "noMore"
								return
							}

						} else {
							// 停止加载状态
							this.Status = "noMore"
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-image: url(/static/background.png);
	}

	.container {
		height: 100%;
		background-image: url(/static/background.png);
		background-size: cover;

		.content {
			.scroll {
				// 兼容H5和APP
				/* #ifdef H5 */
				height: calc(100vh - 260px);
				/* #endif */
				/* #ifdef APP */
				height: calc(100vh - 184px);
				/* #endif */
			}
		}

		.textOverflow {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.textWidth {
			display: inline-block;
			max-width: calc(100% - 100px);
			font-weight: bold;
		}

		.floatRight {
			position: absolute;
			right: 0;
			top: 0;
			width: 40px;
			height: 40px;
		}

		.vert {
			vertical-align: top;
			font-weight: bold;
		}

		.flexBox {
			display: flex;

			view {
				flex: 1;
			}
		}

		.statusItem {
			text-align: center;
			// border: 1px solid #dedeed;
			box-sizing: border-box;
			padding: 5px;
			background-color: #fff;
			color: #888;

			&:active {
				background-color: #2979ff;
				color: #fff;
				font-weight: 600;
			}
		}

		.active {
			background-color: #2979ff;
			color: #fff;
			font-weight: 600;
		}

		.merchant {
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 1px 1px 5px #ccc;
			box-sizing: border-box;
			padding: 10rpx;
			margin: 10rpx 10px;
			position: relative;
			overflow: hidden;

			.redDot {
				width: 20rpx;
				height: 20rpx;
				background-color: red;
				border-radius: 30rpx;
				position: absolute;
				bottom: 15px;
				right: 10px;
			}
		}

	}
</style>